.plugin-group-list {
    height: 100%;
    overflow-y: auto;
    .plugin-group-list-wrap {
        .plugin-group-list-item {
            height: 40px;
            &:not(:first-child) {
                border-top: 1px solid var(--Colors-Use-Neutral-Border);
            }
            &:last-child {
                border-bottom: 1px solid var(--Colors-Use-Neutral-Border);
            }
            &-cont {
                height: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px 8px;
                border-radius: 4px;
                cursor: pointer;
                &:hover:not(.plugin-group-list-item-cont-active) {
                    background-color: var(--Colors-Use-Neutral-Bg);
                    .plugin-number-unshow {
                        display: none;
                    }
                    .extra-opt-btns {
                        display: block;
                    }
                }
                &-left {
                    display: flex;
                    align-items: center;
                    width: calc(100% - 60px);
                    .list-item-icon {
                        margin-top: 2px;
                        svg {
                            width: 16px;
                            height: 16px;
                        }
                    }
                    .groups-text {
                        font-size: 12px;
                        color: var(--Colors-Use-Neutral-Text-1-Title);
                        font-weight: bold;
                        margin-left: 4px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
                .plugin-number {
                    display: block;
                    font-size: 12px;
                    color: #b4bbca;
                }
                .extra-opt-btns {
                    display: none;
                }
            }
            &-cont-active {
                background: var(--Colors-Use-Main-Primary);
                .groups-text,
                .plugin-number {
                    color: #fff;
                }
                .list-item-icon {
                    svg {
                        color: #fff;
                    }
                }
            }
            &-input {
                height: 100%;
            }

            &:hover {
                border-color: transparent;
                & + .plugin-group-list-item {
                    border-top-color: transparent;
                }
            }
        }

        .plugin-group-list-item-border-unshow {
            border-color: transparent;
            & + .plugin-group-list-item {
                border-top-color: transparent;
            }
        }
    }

    .plugin-group-footer {
        font-size: 11px;
        color: #ccd2de;
        text-align: center;
        margin-top: 24px;
    }
}
